<template lang="">
    <div>
            <div id="app">
                    <div class="header_con">
                        <div class="header">
                            <div class="welcome fl">欢迎来到美多商城!</div>
                            <div class="fr">
                                <div v-if="username" class="login_btn fl">
                                    欢迎您：<em>{{ username }}</em>
                                    <span>|</span>
                                    <a @click="logout">退出</a>
                                </div>
                                <div v-else class="login_btn fl">
                                    <a href="login.html">登录</a>
                                    <span>|</span>
                                    <a href="register.html">注册</a>
                                </div>
                                <div class="user_link fl">
                                    <span>|</span>
                                    <a href="user_center_info.html">用户中心</a>
                                    <span>|</span>
                                    <a href="cart.html">我的购物车</a>
                                    <span>|</span>
                                    <a href="user_center_order.html">我的订单</a>
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <div class="search_bar clearfix">
                        <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
                        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
                        <form method="get" action="/search.html" class="search_con fr mt40">
                            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                            <input type="submit" class="input_btn fr" name="" value="搜索">
                        </form>
                    </div>
                
                    <div class="total_count">全部商品<em>{{total}}</em>件</div>
                    <ul class="cart_list_th clearfix">
                        <li class="col01">商品名称</li>
                        <li class="col03">商品价格</li>
                        <li class="col04">数量</li>
                        <li class="col05">小计</li>
                        <li class="col06">操作</li>
                    </ul>
                    <ul class="cart_list_td clearfix" v-for="(sku,index) in cartlist">
                        <li class="col01"><input type="checkbox" name="" v-model="sku.selected" @change="update_select(index)"></li>
                        <li class="col02"><img :src="'http://localhost:8000'+sku.pic"></li>
                        <li class="col03">{{ sku.name }}</li>
                        <li class="col05">{{ sku.price }}元</li>
                        <li class="col06">
                            <div class="num_add">
                                <a @click='add(sku.id,1,index)' class="add fl">+</a>
                                <input v-model="sku.count" @focus="origin_input=sku.count" @blur="add(sku.id,3,index)" type="text" class="num_show fl">
                                <a @click="add(sku.id,2,index)" class="minus fl">-</a>
                            </div>
                        </li>
                        <li class="col07">{{sku.price * sku.count}}元</li>
                        <li class="col08"><a @click="on_delete(index)">删除</a></li>
                    </ul>
                
                    <ul class="settlements">
                        <li class="col01"><input type="checkbox" name=""  v-model='selectedall' @change='changeselectall'></li>
                        <li class="col02">全选</li>
                        <li class="col03">合计(不含运费)：<span>¥</span><em>{{selectedtmoney}}</em><br>共计<b>{{selectedtcount}}</b>件商品</li>
                        <li class="col04"><a href="#/placeOrder">去结算</a></li>
                    </ul>
                
                    <div class="footer">
                        <div class="foot_link">
                            <a href="#">关于我们</a>
                            <span>|</span>
                            <a href="#">联系我们</a>
                            <span>|</span>
                            <a href="#">招聘人才</a>
                            <span>|</span>
                            <a href="#">友情链接</a>
                        </div>
                        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
                        <p>电话：010-****888    京ICP备*******8号</p>
                    </div>
                    </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            total:0,
            cartlist:[],
            selectedtmoney:0,
            selectedtcount:0,
            selectedall:false
        }
    },
    methods: {
        getCartlist(){
            var userid = localStorage.getItem('id')
            this.axios.get('users/cartManage/?userid='+userid).then(res=>{
                this.total=res.data.total
                this.cartlist=res.data.cartlist
                this.selectedtmoney=res.data.selectedtmoney
                this.selectedtcount=res.data.selectedtcount
                this.selectedall = res.data.selectedall
            })
        },
        //全选取消全选
        changeselectall(){
            var userid = localStorage.getItem('id')
            this.axios.post('users/modifyCart/',{'selectedall':this.selectedall,'userid':userid}).then(res=>{
                this.getCartlist()
            })
        },
        //单个操作选中
        update_select(index){
           
            var userid=localStorage.getItem('id')
            var goods_id = this.cartlist[index]['id']
            var status = this.cartlist[index]['selected']
            this.axios.put('users/modifyCart/',{'userid':userid,'goods_id':goods_id,'selected':status}).then(res=>{
                this.getCartlist()
            })
        },
        add(id,type,index){
            var userid=localStorage.getItem('id')
            
            var data={}
            if(type == 3){
                data = {'userid':userid,'goodsid':id,'type':type,'number':this.cartlist[index]['count']}
            }else{
                data={'userid':userid,'goodsid':id,'type':type}
            }
            this.axios.put('users/cartManage/',data).then(res=>{
                if(res.data.code == 20010){
                    alert('已经是1不能再减了')
                }
                this.getCartlist()
            })
        }
    },
    mounted() {
        this.getCartlist()
    },
}
</script>
<style lang="">
    
</style>